<template>
  <div class="my">
    <navbar>
      <div slot="navbar-center">个人中心</div>
    </navbar>
<!--    <h2>个人中心</h2>-->
    <div class="baseInfo flex">
      <img class="avatar" :src="baseInfo.avatar" alt="">
      <div class="marginAuto0">
        <div class="nickName">{{ baseInfo.nickName }}</div>
        <div class="level">{{ baseInfo.level }}</div>
      </div>
    </div>
    <div class="flex have flex-evenly">
      <div class="haveItem haveItem1 borderRight">
        <div class="haveItemNum bold textAlignCenter">{{ baseInfo.yue }}</div>
        <div class="haveItemText textAlignCenter">我的余额</div>
      </div>
      <div class="haveItem haveItem2 borderRight">
        <div class="haveItemNum bold textAlignCenter">{{ baseInfo.yhq }}</div>
        <div class="haveItemText textAlignCenter">我的优惠券</div>
      </div>
      <div class="haveItem haveItem3">
        <div class="haveItemNum bold textAlignCenter">{{ baseInfo.jf }}</div>
        <div class="haveItemText textAlignCenter">我的积分</div>
      </div>
    </div>
    <div class="addtion flex">
      <img class="marginAuto0" src="../assets/me/me_list.png" alt="">
      <div class="marginAuto0">我的消息</div>
    </div>
    <div class="addtion flex">
      <img class="marginAuto0" src="../assets/me/me_jfMall.png" alt="">
      <div class="marginAuto0">积分商城</div>
    </div>
    <div class="addtion flex">
      <img class="marginAuto0" src="../assets/me/me_vip.png" alt="">
      <div class="marginAuto0">会员卡</div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import navbar from "../components/navbar/navbar";

import {baseInfo} from "../data/baseInfo";
import Tabbar from "../components/tabbar/tabbar";

export default {
  name: "my",
  components:{
    Tabbar,
    navbar
  },
  data(){
    return{
      baseInfo
    }
  }
}
</script>

<style scoped>
.my{
  margin: 5.5rem 0 4.5rem 0;
}
.baseInfo{
  padding: .5rem;
}
.baseInfo img{
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  margin-right: 1rem;
}
.baseInfo .nickName{
  font-size: 1.5rem;
}
.baseInfo .level{
  font-weight: 500;
  color: #FFFF00;
  -webkit-text-stroke: .03rem #B86030;
}
.have{
  border-bottom: 1rem solid #F2F2F2;
}
.haveItem{
  width: 33%;
  padding: 1rem 0;
}
.haveItemNum{
  color: #FF4400;
  font-size: 1.5rem;
}
.haveItemText{
  color: #7b7b7b;
}
.addtion{
  padding: .6rem .5rem;
  border-bottom: .1rem solid #F2F2F2;
}
.addtion img{
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .5rem;
}
.borderRight{
  border-right: .1rem solid #F2F2F2;
}
.haveItem .haveItemNum::after{
  font-size: 1rem;
  color: #7b7b7b;
  font-weight: normal;
}
.haveItem1 .haveItemNum::after{
  content: "元";
}
.haveItem2 .haveItemNum::after{
  content: "张";
}
.haveItem3 .haveItemNum::after{
  content: "分";
}
</style>